<template>
<div>
  <div class="flex align-center justify-content-space-between" style="margin-bottom: 20px">
    <div class="title">缴费记录</div>
    <div style="width: 150px">
      <el-select v-model="payRecord.record" placeholder="全部">
        <el-option label="全部" value="all"></el-option>
        <el-option label="已完成" value="completed"></el-option>
      </el-select>
    </div>
  </div>
  <el-table :data="recordsList" style="width: 100%" height="200px">
    <el-table-column prop="month" label="缴费月份" align="center" />
    <el-table-column prop="amount" label="缴费金额"  align="center"  />
    <el-table-column prop="method" label="缴费方式"  align="center"  >
      <template #default="{ row }">
            <span v-if="row.method === 'wechat'">
            <i class="el-icon-wechat"></i> 微信支付
          </span>
        <span v-else-if="row.method === 'alipay'">
            <i class="el-icon-alipay"></i> 支付宝
          </span>
        <span v-else-if="row.method === 'unionpay'">
            <i class="el-icon-unionpay"></i> 银联支付
          </span>
      </template>
    </el-table-column>
    <el-table-column prop="time" label="缴费时间"  align="center"  />
    <el-table-column prop="status" label="状态"  align="center" >
      <template #default="{ row }">
        <div :class="getStatusClass(row.status)">{{ getStatusText(row.status) }}</div>
      </template>
    </el-table-column>
    <el-table-column label="操作"  align="center" >
      <template #default="{ row }">
        <el-button primary link @click="viewReceipt(row)">查看凭证</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="position:relative;">
    <pagination :total="Number(recordsList.length)" v-model:page="payRecord.skipCount" v-model:limit="payRecord.maxResultCount" @pagination="getCancerIndicatorList" /></div>
</div>
</template>

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/dist/index.css'
import {ref} from "vue";
const payRecord = ref({
  record: '', // 科室
  skipCount: 1, // 当前页
  maxResultCount: 10 // 一页的数据量
});
const recordsList = ref([
  {
    month: '2025年7月',
    amount: '¥86.50',
    method: 'wechat',
    time: '2025-07-15 14:23',
    status: 2
  },
  {
    month: '2025年6月',
    amount: '¥86.50',
    method: 'alipay',
    time: '2025-06-12 09:45',
    status: 2
  },
  {
    month: '2025年5月',
    amount: '¥86.50',
    method: 'unionpay',
    time: '2025-05-18 16:30',
    status: 2
  },
  {
    month: '2025年7月',
    amount: '¥86.50',
    method: 'wechat',
    time: '2025-07-15 14:23',
    status: 2
  },
  {
    month: '2025年6月',
    amount: '¥86.50',
    method: 'alipay',
    time: '2025-06-12 09:45',
    status: 2
  },
  {
    month: '2025年5月',
    amount: '¥86.50',
    method: 'unionpay',
    time: '2025-05-18 16:30',
    status: 2
  }
]); // 模拟数据
const getStatusText = (statusValue) => {
  switch (statusValue) {
    case 0:
      return '未缴费';
    case 1:
      return '部分缴费';
    case 2:
      return '已完成';
    default:
      return '未知缴费';
  }
};
const getStatusClass = (statusValue) => {
  switch (statusValue) {
    case 0: // 未缴费
      return 'status-unpaid';
    case 1: // 部分缴费
      return 'status-partial';
    case 2: // 已缴费
      return 'status-paid';
    default:
      return '';
  }
};
const getCancerIndicatorList = ()=>{  // 缴费记录分页

}
const viewReceipt = (row) => { // 查看凭证方法
  alert(`查看 ${row.month} 的缴费凭证`);
};


</script>

<style scoped lang="scss">
.status-unpaid {
  background-color: #FEE2E2;
  color: #A12C2C;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bolder;
  margin: 0 auto;
}

.status-partial {
  background-color: #FEF9C3;
  color: #A27639;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bolder;
  margin: 0 auto;
}

.status-paid {
  background-color: #DCFCE7;
  color: #2E7749;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bolder;
  margin: 0 auto;
}
</style>
